<template>
  <div class="page3">
    <div class="containt fadeInDown">
      <p> <span class="yellowfont">通用人星球</span>人才是企业创新发展的第一资源，数字化助力理清集团人力现状，实现组织人事流程、薪酬管理的全级次覆盖，为运营人才、激发人才打下基础。</p>
    </div>
    <div class="img1 animate__fadeInUp">
      <img class="img1_img_top" src="../../assets/images/bill2022/3/img3.png" alt="" srcset="">
      <img class="img1_img_btm" src="../../assets/images/bill2022/3/img_btm.png" alt="">
    </div>
  </div>
</template>
<script>

export default {
  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>
<style lang='less' scoped>
.page3 {  display: flex;
  align-items: center;
  flex-direction: column;
  .containt {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }

  .img1 {
    width: 100%;
    position: relative;
    position: absolute;
    bottom: 6rem;
    .img1_img_top {
      width: 45.875rem;
      height: 40.25rem;
    }
    .img1_img_btm {
      width: 29.625rem;
      height: 33.625rem;
      margin-top: -22.5rem;
      margin-left: 11rem;
    }
  }

  img {
    animation: slideUp 1s ease-in-out;
    -webkit-animation:slideUp 1s ease-in-out;
    -moz-animation: slideUp 1s ease-in-out;/*gecko内核的浏览器（如 Firefox）*/
	-o-animation: slideUp 1s ease-in-out;/*Opera 浏览器*/
	-ms-animation: slideUp 1s ease-in-out;/*IE8+*/
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  @keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }

    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-webkit-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }

  @-moz-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-o-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
  @-ms-keyframes slideUp {
    0% {
      transform: translateY(0);
      transform: scale3d(1);
    }
    100% {
      transform: translateY(1rem);
      transform: scale3d(1.2);
    }
  }
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInUp {
  animation: fadeInUp 1s ease-in-out;
  animation-iteration-count: 1;
}
</style>